<template>
  <div class="divBox">
    <el-card>
      <div class="clearfix">
        <div class="container">
          <el-form inline size="small">
            <el-form-item label="状态：">
              <el-select
                v-model="listPram.status"
                placeholder="状态"
                class="selWidth"
                @change="handlerSearch"
              >
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="显示" :value="1"></el-option>
                <el-option label="不显示" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称：">
              <el-input
                v-model="listPram.name"
                placeholder="请输入名称"
                class="selWidth"
                size="small"
                clearable
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="handlerSearch"
                  size="small"
                />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelApply"
          v-hasPermi="['admin:advantage:delete']"
          >删除申请</el-button
        >
      </div>
      <el-table
        ref="list"
        :data="listData"
        size="mini"
        class="table"
        highlight-current-row
        row-key="id"
        :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.name }} | {{ scope.row.id }}
          </template>
        </el-table-column>
        <template>
          <el-table-column label="分类图标" min-width="180" align="center">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 36px; height: 36px"
                  :src="scope.row.extra"
                  :preview-src-list="[scope.row.extra]"
                  v-if="scope.row.extra"
                />
                <img
                  style="width: 36px; height: 36px"
                  v-else
                  :src="defaultImg"
                  alt=""
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="介绍说明" min-width="300">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                {{ scope.row.desc }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="排序"
            prop="sort"
            min-width="80"
            align="center"
          />
          <el-table-column label="状态" min-width="100" align="center">
            <!--  -->
            <template
              slot-scope="scope"
              v-if="checkPermi(['admin:advantage:update:status'])"
            >
              <el-switch
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
                active-text="显示"
                inactive-text="隐藏"
                @change="onchangeIsShow(scope.row)"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="200"
            fixed="right"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleEditMenu(scope.row)"
                v-hasPermi="['admin:advantage:info']"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleDelMenu(scope.row)"
                v-hasPermi="['admin:advantage:delete']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-card>
    <el-button @click="onResetContent">重连</el-button>

    <el-button @click="onClose">断开</el-button>
    <!-- 新增、编辑 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="aDialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <AdvantageEdit @hideEditDialog="onHideEditDialog" />
    </el-dialog>
  </div>
</template>

<script>
import AdvantageEdit from "@/components/Advantage/edit.vue";
import Stomp from "stompjs";
import {
  MQTT_SERVICE,
  MQTT_USERNAME,
  MQTT_PASSWORD,
  MQTT_host,
  MQTT_topic,
} from "@/utils/mqtt";
export default {
  components: {
    AdvantageEdit,
  },
  data() {
    return {
      aDialogVisible: false,
      listPram: {
        status: -1,
        name: "",
      },
      // 列表数据
      listData: [],
      dialogTitle: "添加优势",
      client: null,
    };
  },
  mounted() {
    this.connect();
  },
  methods: {
    // 删除申请
    handleDelApply() {
      this.aDialogVisible = true;
    },
    //搜索
    handlerSearch() {
      console.log(this.listPram);
    },
    handleClose(done) {
      done();
    },
    onHideEditDialog() {
      console.log(11);
      this.aDialogVisible = false;
    },

    // 测试
    onConnected() {
      //订阅的频道
      const topic = MQTT_topic;
      this.client.subscribe(topic, this.responseCallback, this.onFailed);
    },
    onFailed(msg) {
      console.log("MQ Failed:" + msg);
    },
    //成功时的回调函数
    responseCallback(msg) {
      //接收消息的处理
      console.log("MQ msg=>" + msg.body);
      const data = msg.body
      // 注册通知
      if(data.type === 'register') {
         this.$notify.info({
          title: data.body.title,
          message: data.body.desc
        });
      }
    },
    //连接
    connect() {
      this.client = Stomp.client(MQTT_SERVICE)
      console.log(this.client)
      this.client.connect(MQTT_USERNAME,MQTT_PASSWORD, this.onConnected, this.onFailed,'/');
    },
    // 断开
    onClose() {
      this.client.disconnect(() => {
        console.log('已断开')
      })
    },
    // 重连
    onResetContent() {
      this.connect()
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
